<template>
  <Dialog
    v-model="openMap"
    title="位置选择"
    width="1000px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <el-form label-width="80px">
      <el-row>
        <el-col :span="7">
          <el-form-item label="位置经度">
            <el-input size="small" type="text" v-model="addressInfo.longitude" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="位置纬度">
            <el-input size="small" type="text" v-model="addressInfo.latitude" readonly />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="baidu" ref="mapRef" id="baidumap" style="width: 100%; height: 450px"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmSelect"> 确 定 </el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { BMPGL } from '@/utils/loadBaiduMap'
import { onMounted, watch, ref, reactive } from 'vue'

const emit = defineEmits(['success'])
// 地图相关
let map = ref(null)
const mapZoom = ref(15)
const ak = ref('tEpeS8qwvQwKinQkMa7x037oI0jMYFpD')
let openMap = ref(false)
let addressInfo = reactive({
  // 地址信息
  longitude: '', // 经度
  latitude: '' // 纬度
})
watch(
  () => [openMap],
  () => {
    if (!openMap.value) {
      map.value && map.value.destroy()
    }
  },
  { deep: true }
)

const initMap = () => {
  map.value = null
  BMPGL(ak.value).then((BMapGL: any) => {
    map.value = new BMapGL.Map('baidumap')
    var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
    map.value.addControl(zoomCtrl)
    var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
    map.value.addControl(cityCtrl)
    var LocationControl = new BMapGL.LocationControl() // 添加定位控件，用于获取定位
    map.value.addControl(LocationControl)
    var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
    map.value.addControl(scaleCtrl)
    map.value.setMapType() // 设置地图类型为标准地图模式；
    var localcity = new BMapGL.LocalCity()
    localcity.get((e: { name: any }) => {
      map.value.centerAndZoom(e.name, mapZoom.value)
    })

    setTimeout(() => {
      map.value.centerAndZoom(new BMapGL.Point(123.44138, 41.81066), mapZoom.value)
    }, 1000)

    map.value.enableScrollWheelZoom(true)
    map.value.setHeading(64.5)
    map.value.setTilt(73)

    //点击下拉框的值
    map.value.addEventListener('click', function (e: { latlng: { lng: string; lat: string } }) {
      map.value.clearOverlays()
      var point1 = new BMapGL.Point(e.latlng.lng, e.latlng.lat)
      // 创建点标记
      var marker1 = new BMapGL.Marker(point1)
      // 在地图上添加点标记
      map.value.addOverlay(marker1)
      addressInfo.longitude = e.latlng.lng
      addressInfo.latitude = e.latlng.lat
    })
  })
}

/** 打开地图选择 */
const open = async () => {
  openMap.value = true
  initMap()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/**
 * 确认选择
 */
const confirmSelect = () => {
  openMap.value = false
  emit('success', addressInfo)
}
/**
 * 取消选择
 */
const cancel = () => {
  openMap.value = false
}
</script>

<style>
.BMap_cpyCtrl,
.anchorBL {
  display: none;
}
</style>
